<template>
	<view>
		<!-- <scroll-view scroll-y="true"> -->
		<view class="form-list-wrap word5">
			<view class="form-list-item">
				<text class="form-list-item-label required">联系人名：</text>
				<input class="form-list-item-input" type="text" placeholder="请输入姓名" v-model="params['联系人姓名']">
			</view>
			<view class="form-list-item">
				<text class="form-list-item-label required">联系电话：</text>
				<input class="form-list-item-input" type="number" placeholder="请输入电话号码" v-model="params['联系人电话']">
			</view>
			<view class="form-list-item">
				<text class="form-list-item-label required">装修地址：</text>
				<input class="form-list-item-input" type="text" placeholder="请输入装修地址" v-model="params['报事位置']">
			</view>
			<view class="form-list-item">
				<text class="form-list-item-label required">装修事项：</text>
				<input class="form-list-item-input" type="text" placeholder="请输入装修事项" v-model="params['装修申请工单']['装修事项']">
			</view>
			<view class="form-list-item">
				<text class="form-list-item-label required">施工单位：</text>
				<input class="form-list-item-input" type="text" placeholder="请输入施工单位名称" v-model="params['装修申请工单']['施工单位']">
			</view>
			<view class="form-list-item">
				<text class="form-list-item-label required">装修期限：</text>
				<view class="form-list-item-input">
					<view v-if="isChoose" style="color: #777;" @click="showPicker">{{chooseDate}}</view>
					<view v-else @click="showPicker">{{chooseDate}}</view>
					<rangeDatePick :show="isShow" @showchange="showchange" :start="startTime" end="2200-12-01" :value="value" @change="bindChange"
					 @cancel="bindCancel" themeColor="#4C83D6" fields="day"></rangeDatePick>
				</view>
			</view>
			<view class="form-list-item">
				<text class="form-list-item-label required">施工负责人：</text>
				<input class="form-list-item-input" type="text" placeholder="请输入姓名" v-model="params['装修申请工单']['施工负责人']">
			</view>
			<view class="form-list-item">
				<text class="form-list-item-label required">负责人电话：</text>
				<input class="form-list-item-input" type="number" placeholder="请输入电话号码" v-model="params['装修申请工单']['负责人电话']">
			</view>
			<view class="form-list-item">
				<text class="form-list-item-label">完成时限：</text>
				<input class="form-list-item-input" type="number" placeholder="请输入完成时限" v-model="params['时限']">
			</view>
			<view class="form-list-item">
				<text class="form-list-item-label">时限类型：</text>
				<!-- <input type="text" placeholder="请输入装修地址"> -->
				<view class="form-list-item-input">
					<view style="width: 516rpx;" class="type" @click="handleTap('picker2')">{{label2}}</view>
					<lb-picker ref="picker2" mode="selector" :list="delayTypeList" :dataset="{ name: 'label2' }"
					 @change="handleChange" @confirm="handleConfirm2" @cancel="handleCancel">
					</lb-picker>
				</view>
			</view>
			<view class="form-list-item">
				<text class="form-list-item-label required">所属小区：</text>
				<!-- <input type="text" placeholder="请输入装修地址"> -->
				<view class="form-list-item-input">
					<view style="width: 516rpx;" class="type" @click="handleTap('picker')">{{label}}</view>
					<lb-picker v-model="params['所属项目id']" ref="picker" mode="selector" :list="projectList" :dataset="{ name: 'label' }" @change="handleChange"
					 @confirm="handleConfirm" @cancel="handleCancel">
					</lb-picker>
				</view>
			</view>
			<view class="form-list-item" v-if="personType == 1">
				<text class="form-list-item-label">处理人员：</text>
				<!-- <input type="text" placeholder="请输入装修地址"> -->
				<view class="form-list-item-input">
					<!-- <view style="width: 516rpx;" class="type" @click="handleTap('picker1')">{{label1}}</view>
					<lb-picker v-model="params['接单人id']" ref="picker1" mode="selector" :list="operatorList" :dataset="{ name: 'label1' }" @change="handleChange"
					 @confirm="handleConfirm" @cancel="handleCancel">
					</lb-picker> -->
					<song-data-picker :bigText="true" :noPadding="true" placeholder="请选择处理人员" :showArrow="false" :border="false" ref="songPicker" :localdata="operatorList" popup-title="请选择" :openSearch="true" @change="onChange" @nodeclick="onnodeclick"></song-data-picker>
				</view>
			</view>
			<!-- <view class="form-list-item">
				
				<text class="form-list-item-label required">所属小区：</text>
				<single-picker class="form-list-item-input" :list="projectList" v-model="params['所属项目id']"  />
			</view> -->
			<view class="form-list-item" style="flex-direction: column;">
				<textarea fixed class="text" style="width: 730rpx;height: 220rpx;" placeholder="请输入报事描述(必填)..." v-model="params['报事描述']" />
				<uploader :max="3" ref="uploader"  @input='onchange' />
			</view>
				<button class="btn" @click="handleSumbit">提交申请</button>
				<view class="renovation-notice" >提交即代表您已阅读并同意<span @click="goRenovationNotice">装修须知</span></view>
			</view>
		<!-- </scroll-view> -->
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker/index.vue'
	import rangeDatePick from '@/components/pyh-rdtpicker/pyh-rdtpicker.vue';
	import { previewImg } from '@/utils/previewImg'
	import uploader from '@/components/my-components/image-uploader.vue'
	import dayjs from 'dayjs'
	import singlePicker from '@/components/my-components/single-picker.vue'
	import { mapState, mapGetters } from 'vuex'
	export default {
		components: {
			LbPicker,
			rangeDatePick,
			uploader,
			singlePicker
		},
		props: {
			projectList: {
				type: Array,
				default: () => []
			},
			operatorList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				delayTypeList: this.$type.delayTypeList,
				// operatorList: [],
				currentProject:null,
				params: {
					机构id: this.$config.groupId,
					接单人id: null,
					操作类型: 'submit',
					工单类型: 'G',
					联系人姓名: '',
					联系人电话: '',
					报事描述: '',
					报事位置: '',
					上门时间: '',
					接单人id: null,
					装修申请工单: {
						施工单位: '',
						施工负责人: '',
						负责人电话: '',
						装修开始时间: '',
						装修结束时间: '',
						装修事项: ''
					},
					所属项目id: null,
					报事附件: [],
					来源: 5
				},
				params1: {
					功能模块: ['工单管理'],
					单位id: null,
					状态: 1
				},
				chooseImg: [],
				isShow: false,
				value: [dayjs(new Date()).format('YYYY-MM-DD')],
				value1: '',
				label: '',
				label1: '',
				label2: '',
				chooseDate: '请选择装修期限',
				file: {
					fileData: null,
					fileName: null
				},
				接单人id: null,
				loading: true,
				fileIds: [],
				startTime: dayjs(new Date()).format('YYYY-MM-DD'),
				isChoose: true
			}
		},
		created() {
			this.params.联系人姓名 = uni.getStorageSync('userInfo').name
			this.params.联系人电话 = uni.getStorageSync('userInfo').mobile
			// this.params.接单单位id = uni.getStorageSync('currentUnitId')
			// this.getOperatorList()
		},
		computed: {
			...mapGetters(['personType'])
		},
		methods: {
			onChange(e) {
				this.params['接单人id'] = e.detail.value[0].id
			},
			ontest(){
				console.log(this.params["所属项目id"])
			},
			onchange(e) {
				this.params.报事附件 = e
				// console.log(e)
			},
			getData(time) {
				console.log(time, '回调时间')
			},
			showchange(){
				this.isShow=!this.isShow;
			},
			// 装修期限
			bindChange(data){
				this.isChoose = false
				console.log(data)
				this.params.装修申请工单.装修开始时间 = dayjs(data[0]).format('YYYY-MM-DDTHH:mm:ssZ')
				this.params.装修申请工单.装修结束时间 = dayjs(data[1]).format('YYYY-MM-DDTHH:mm:ssZ')
				this.chooseDate=data[0]+"至"+data[1]
			},
			showPicker(e){
				this.isShow=true
			},
			bindCancel(e){
				console.log(e)
			},
			handleCancel(e) {
				uni.showTabBar({
					animation: true
				})
				console.log('cancel::', e)
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleChange(e) {
				console.log('change::', e)
			},
			handleConfirm(e) {
				// 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
				console.log('confirm::', e)
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					if(name === 'label1' && this.personType === 1) {
						this.$refs.songPicker.inputSelected = []
						this.params.接单人id = null
						this.$emit('init', this.params.所属项目id)
					}
					if (name && label) {
						this[name] = label
					}
				}
			},
			handleConfirm2(e) {
				if(e) {
					const name = e.dataset.name
					const label = e.item
					console.log(e)
					this.params.时限单位 = e.value
					// this.params.unit = e.item.id
					// this.params4.education = e.item.id
					if(name && label){
						this[name] = label
					}
				}
			},
			handleSumbit() {
				if(this.params.时限 === '') {
					this.params.时限 = null
				}
				this.params.时限 = this.params.时限 && parseInt(this.params.时限)
				let params = JSON.parse(JSON.stringify(this.params))
				if(params.时限单位 === '小时') {
					params.时限 = params.时限 * 60
				}else if(params.时限单位 === '天') {
					params.时限 = params.时限 * 1440
				}
				this.$emit('submit', params)
			},
			goRenovationNotice() {
				this.$emit('renovationNotice')
			}
		}
	}
</script>

<style lang="scss">
	.form-list-item {
		.margin {
			margin-right: 30rpx;
		}
	}
</style>
